<template>
	<cover-view style="width: 100%;height: 100vh" class="position-r">
		<cover-view style="width: 90%; position: fixed;top:40rpx;left:40rpx;z-index: 999999999999">
			<cover-view class="state-navbar"></cover-view>
			<cover-view class="flex align-center w-100 justify-between font-14">
				<cover-view class="advertising">广告</cover-view>
				<cover-view class="advertising-date">{{taskProgressInfo.finishCount != taskProgressInfo.totalCount ? ('浏览页面'+(second || 0)+'秒后完成任务'+(taskProgressInfo.finishCount + (videoList[videoIndex].isFinish ? 0 : 1))+'/' + taskProgressInfo.totalCount || 5):('已完成任务，视频剩余'+second+'秒')}}</cover-view>
				<cover-view class="backBox">
					<cover-image class="backImg" src="@/static/discountCoupon/cancel-video.png" @tap="backClick"></cover-image>
				</cover-view>
			</cover-view>
		</cover-view>
		<video :duration="second" :show-loading="true" :loop="false" :controls="false" id="myVideo"
			@loadedmetadata="getVideoDuration" @timeupdate="getVideoDurationUpdate" :enable-progress-gesture="false"
			:http-cache="true" :page-gesture="false" :show-fullscreen-btn="false" :show-play-btn="false" autoplay="autoplay"
			:src="videoList[videoIndex] && videoList[videoIndex].taskUrl" poster="" @ended="ended"
			object-fit="contain"
			:style="'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px; background-color: #000000;'" />
		<cover-view class="position-a alertBox" v-if="showAlert">
			<cover-view class="msgBox position-r text-center">
				<cover-image class="w-100 h-100" src="@/static/discountCoupon/advertising-bg03.png"></cover-image>
				<cover-view class="schedule font-25 text-bold position-a">您已完成任务{{taskProgressInfo.finishCount || 0}}/{{taskProgressInfo.totalCount || 5}}</cover-view>
				<cover-view class="schedule2 flex font-16 text-bold  position-a">
					<cover-view>再看{{taskProgressInfo.totalCount - taskProgressInfo.finishCount}}个视频就可以获得</cover-view>
					<cover-view class="text-theme">6个广告积分</cover-view>
				</cover-view>
				<cover-view class="schedule3  text-bold font-16 position-a" v-if="backCancel">确认要退出取消任务吗？</cover-view>
				<cover-view class="w-100 m-l-40 m-t-30 count-box-cont">
					<cover-view class="color-w text-center font-13 count-box bg-red"> 剩余{{taskProgressInfo.totalCount - taskProgressInfo.finishCount}}个视频</cover-view>
				</cover-view>
				<cover-view class="progress">
					<cover-view class="progressBox">
						<cover-view class="progressItem" :style="{'width':this.$accMul(this.$accDiv(Number(taskProgressInfo.finishCount), Number(taskProgressInfo.totalCount)), 100)+'%'}"></cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="w-100 btn-box m-t-30 flex justify-center">
					<cover-view class="font-14 m-r-20 bg-red text-white btn" @click="back">确认退出</cover-view>
					<cover-view class="font-14 bg-red text-white btn" @click="continueGetMoney" v-if="taskProgressInfo.finishCount != taskProgressInfo.totalCount">
						继续领奖励
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>

		<cover-view class="position-a alertBox" v-if="completeShow">
			<cover-view class="msgBox position-r text-center">
				<cover-image class="w-100 h-100" src="@/static/discountCoupon/advertising-bg04.png"></cover-image>
				<cover-view class="schedule4 font-16 text-bold position-a">打卡视频任务完成5/5</cover-view>
				<cover-view class="schedule5 font-25 text-bold position-a">恭喜您</cover-view>
				<cover-view class="schedule6  flex font-25 text-bold  position-a">获得<cover-view class="text-theme">6个广告积分</cover-view></cover-view>
				<cover-view class="w-100 btn-box m-t-30 flex justify-center">
					<cover-view class="font-14 bg-red text-white btn" @click="handleReceiveReward">
						{{taskProgressInfo.isReceive ? '关闭' : '开心收下'}}
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	import { taskProgress, sign } from '@/common/api/advertising.js';
	export default {
		data() {
			return {
				completeShow: false, //完成弹窗显示
				videoIndex: 0,
				showAlert: false, //提示弹窗
				windowWidth: null,
				windowHeight: null,
				videoUrl1: null, 
				videoUrl2: null, 
				coverPicture2: '',
				coverPicture: '',
				todayCount: 0,
				videoList: [], // 视频列表
				second: -1, //视频播放秒
				timer: null,
				timeCount: 0, //视频总时长
				videoContext: null,
				userInfo: {},
				taskProgressInfo: {},
				autoPlayBool: true,
				backCancel: false
			}
		},
		computed: {
			percentageText() {
				return this.$accMul(this.$accDiv(Number(this.todayCount), 5), 100)
			},
		},
		onLoad(options) {
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;

			this.videoIndex = options.videoIndex || ''
			console.log("videoIndex", this.videoIndex)
			this.getTaskProgress(true)
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			// 领取积分
			handleReceiveReward() {
				if(this.taskProgressInfo.isReceive) {
					this.completeShow = false
				} else {
					setTimeout(()=> {
						uni.navigateBack()
					}, 1000)
				}
			},
			// 获取视频列表
			getTaskProgress(isInit) {
				taskProgress().then(res => {
					if(res.code == 200) {
						this.taskProgressInfo = res.data || {}
						this.videoList = res.data.taskList || []
						if(this.taskProgressInfo.finishCount == this.taskProgressInfo.totalCount) {
							this.completeShow = true
						}
						// 播放下一个
						if(!isInit) {
							this.showAlert = true
							let notViewVideo = this.videoList.filter(item => !item.isFinish) || []
							if(notViewVideo.length > 0) {
								this.videoIndex = this.videoList.findIndex(item => item.taskId == notViewVideo[0].taskId)
							}
							this.autoPlayBool = false
						}
					}
				})
			},
			//获取视频时长
			getVideoDuration(event) {
				this.second = event.target.duration?parseInt(event.target.duration):0;
			},
			getVideoDurationUpdate(e) {
				if(!this.autoPlayBool){
					this.videoContext.pause()
				}
				let count = this.$accReduce(e.detail.duration, e.detail.currentTime)
				this.second = (count < 1 && count > 0) ? 1 : parseInt(count)
			},
			back() {
				uni.navigateBack({ delta: 1 });
			},
			//isBack是否强制退出
			backClick() {
				this.videoContext.pause()
				if(this.completeShow) {
					this.back()
				} else {
					this.showAlert = true
					this.backCancel = true
				}
			},
			// 视频播放结束
			ended() {
				if(this.videoList[this.videoIndex].isFinish){
					// this.$msg('今天已观看过该视频，请观看其他视频试试')
					this.getTaskProgress(false)
				}else{
					let parmas = {
						bid: this.videoList[this.videoIndex].taskId
					}
					sign(parmas).then(res => {
						if(res.code == 200) {
							this.getTaskProgress(false)
						} else {
							this.$msg(res.msg)
						}
					})
				}
			},
			close() {
				this.showAlert = false
			},
			// 继续领奖励
			async continueGetMoney() {
				this.autoPlayBool = true
				//如果是看完一个视频弹出继续领取奖励
				if (this.showAlert) {
					this.showAlert = false
					this.backCancel = false
				}
				//点击叉掉页面 继续领取奖励
				this.videoContext.play()

			},
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: #000;

	}
	.position-a {
		position: absolute;
	}

	.container {
		width: 100vw;
		overflow: hidden;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.msgBox {
		width: 600rpx;
		height: 1000rpx;
		overflow: initial !important;
	}

	.schedule2,
	.schedule3,
	.schedule,
	.progress,
	.btn-box,
	.schedule4,
	.schedule5,
	.schedule6 {
		left: 50%;
		transform: translateX(-50%);
	}

	.schedule {
		top: 498rpx;
	}

	.schedule4 {
		top: 558rpx;
	}

	.schedule5 {
		top: 630rpx;
	}

	.schedule6 {
		top: 690rpx;
	}

	.schedule2 {
		top: 594rpx;
	}

	.schedule3 {
		top: 636rpx;
	}

	.count-box-cont {
		overflow: inherit !important;
		position: absolute;
		left: 30rpx;
		top: 636rpx;
		z-index: 99;
		margin-bottom: 20rpx;
	}
	.count-box {
		width: 175rpx;
		height: 40rpx;
		padding: 4rpx 0;
		border-radius: 8rpx;
		overflow: inherit !important;
		background: #ff0012;
		color: #fff;
		position: relative;
		z-index:22;
	}

	.triangle {
		width: 0;
		height: 0;
		position: absolute;
		border: 5px solid transparent;
		border-top-color: #ff0012;
		top: 734rpx;
		margin-left: 46rpx;
	}

	.progress {
		width: 464rpx;
		top: 746rpx;
		position: absolute;
	}

	.circle {
		left: 50%;
		transform: translateX(-50%);
		bottom: -90rpx;
		width: 50rpx;
		height: 50rpx;
		padding: 30rpx;
		position: absolute;
		z-index: 99999999;
		border-radius: 50rpx;
		overflow: inherit !important;
	}

	.alertBox {
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		z-index: 9999;
		overflow: inherit !important;
	}

	.back {
		width: 50rpx;
		height: 50rpx;
		top: 50rpx;
		left: 50rpx;
		z-index: 999;
	}

	.backBox {
		width: 70rpx;
		height: 70rpx;
		border-radius: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.advertising {
		width:80rpx;
		text-align: center;
		height:30rpx;
		line-height:30rpx;
		background: rgba(256, 256, 256, 0.5);
		border-radius: 16rpx;
		font-size: 20rpx;
		color: #fff;
		z-index:111;
	}
	.advertising-date{
		z-index:111;
		text-align: center;
		width:400rpx;
		height:50rpx;
		line-height:50rpx;
		color:#fff;
	}

	.backImg {
		width: 30rpx;
		height: 30rpx
	}

	.state-navbar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.btn-box {
		position: absolute;
		bottom: 50rpx;

		.btn {
			width: 232rpx;
			height: 78rpx;
			line-height: 78rpx;
			background: #FF1A1A;
			border-radius: 12rpx;
		}

	}
	.progressBox{
		width: 100%;
		height: 18px;
		background-color: #fff;
		border-radius: 18px;
		.progressItem{
			height: 100%;
			background-color: #e60000;
			border-radius: 18px;
		}
	}
</style>